<script lang="ts" setup>
defineOptions({ name: 'Home' });
const userStore = useUserStore();
const isLoginIn = computed(() => {
  return userStore?.userDetail?.educationExperienceBo?.id;
});

</script>

<template>
  <div class="animate__animated animate__fadeInUp relative w-full">
    <div class="w-full absolute left-0 top--120px bg h-686px z--1"></div>
    <div class="h-40px"></div>
    <div class="w-1200px mx-auto flex relative z-10 h-410px">
      <div class="bg-#fff w-220px rounded-l-10px shadow-xl bg-op-60 relative">
        <HomeHomePosition />
      </div>
      <div class="w-720px h-full">
        <!-- <a-carousel> -->
        <img src="../assets/images/index-c@2x.png" alt="" class="w-full h-full" />
        <!-- </a-carousel> -->
      </div>
      <div class="w-260px h-full rounded-r-10px shadow-xl overflow-hidden">
        <HomeInfoBox v-if="isLoginIn"/>
        <HomeLoginForm v-else/>
      </div>
    </div>
    <HomeAiBox/>
    <HomeLastOffer />
    <HomePositionList />
    <HomeCompanyList />
    <div class="h-70px"></div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background: url(../assets/images/index-bg@2x.png) no-repeat;
  background-size: 100% 100%;
}
</style>
